<template>
    <div class="dialog">
        <el-dialog
            :title="dialogData.title"
            :visible.sync="dialogVisible"
            width="570px"
            :before-close="handleClose">
            <div class='dialogBody'>
                <el-form :model="createForm" :rules="rules" ref="createForm" label-width="80px" size="mini">
                    <el-form-item label="名称" prop="name" v-if='dialogData.type == "单位"'>
                        <el-input v-model="createForm.name" placeholder="请输入" :maxlength="120"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="comment" v-if='dialogData.type == "单位"'>
                        <el-input v-model="createForm.comment" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="不良品项编号" prop="code" v-if='dialogData.type == "不良品项"'>
                        <el-input v-model="createForm.code" placeholder="请输入,忽略将自动生成" :disabled="disabledCode" :maxlength="120"></el-input>
                    </el-form-item>
                    <el-form-item label="不良品项名称" prop="name" v-if='dialogData.type == "不良品项"'>
                        <el-input v-model="createForm.name" placeholder="请输入" :maxlength="120"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancle">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        dialogData: {
            type: Object,
            default: ''
        },
        dialogStatus: {
            type: Boolean,
            default: ''
        }
    },
    data() {
        return {
            dialogVisible: false,
            createForm: {
                name: '',
                comment: '',
                code: ''
            },
             rules: {
                name: [{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'change'
                }]
            },
            disabledCode: false
        }
    },
    mounted() {
        
    },
    methods: {
        // 父组件传参
        fromFather(data) {
            data.id ? this.createForm.id = data.id : this.createForm.id = ''
            data.id ? this.disabledCode = true : this.disabledCode = false
            this.$set(this.createForm, 'name', data.name)
            // this.createForm.name = data.name
            this.createForm.comment = data.comment
            this.createForm.code = data.code
        },
        // 关闭对话框
        handleClose() {
            this.createForm = {
                name: '',
                comment: '',
                code: ''
            }
            this.dialogVisible = false
            this.$refs.createForm.resetFields()
            this.$emit('dialogClose', this.dialogVisible)
        },
        // 取消
        handleCancle() {
            this.dialogVisible = false
            this.$refs.createForm.resetFields()
            this.$emit('dialogClose', this.dialogVisible)
            this.createForm = {
                name: '',
                comment: '',
                code: ''
            }
        },
        // 确定
        handleOk() {
            var that = this
            this.$refs.createForm.validate((valid) => {
                if (valid) {
                    that.dialogVisible = false
                    that.toFather()
                } else {
                    return false;
                }
            });
            this.createForm = {
                name: '',
                comment: '',
                code: ''
            }
        },
        toFather() {
            this.dialogVisible = false
            let obj = {}
            this.createForm.id ? obj.id = this.createForm.id : ''
            if(this.dialogData.type == '单位') {
                obj.name = this.createForm.name
                obj.comment = this.createForm.comment
            } else {
                obj.name = this.createForm.name
                obj.code = this.createForm.code
            }
            this.$emit('dialogClose', this.dialogVisible, obj)
        }

    },
    watch: {
        dialogStatus: function(newVal,oldVal) {
            this.dialogVisible = newVal
        }
    }
}
</script>

<style lang="less" scoped>
.dialog {
    .dialogBody {
        width: 470px;
        padding: 20px 50px 20px 60px;
        margin: 20px 50px 10px;
        background: #fbfbfb;
    }
    /deep/ .el-dialog__body {
        padding: 0;
    }
    /deep/ .el-dialog__title {
        font-size: 14px;
    }
    /deep/ .el-dialog__footer {
        display: flex;
        justify-content: center;
        button {
            width: 100px;
            margin: 0 10px
        }
    }
}
</style>